<script setup>
import {ElMessage, ElMessageBox, ElTable} from "element-plus";
import ClassAdd from "@/views/subject/classes/ClassAdd.vue";
import ClassUpdate from "@/views/subject/classes/ClassUpdate.vue"
import {ref, reactive} from "vue"
import axios from "@/axios/index.js"
import {useStaffStore} from "@/stores/staff.js";

let loading = ref(true);
let tableData = ref([])
const page = ref(1) //当前页
const total = ref(0) //总记录数
const size = ref(5) //每页显示条数
let pagination = reactive({
  currentPage: 1,
  pageSize: 5
})

let addDialog = ref(false)
let updateDialog = ref(false)

let formData = reactive({
  className:'',
  realName:'',
  teacherName:'',
  subjectName:'',
  classStatus: ''
})
//修改
let rowData = reactive({})

//加载列表
function loadTableData() {
  loading.value = true;
  axios.get(`/api/v1/class/getClassList`, {
    params: {
      current: pagination.currentPage,
      size: pagination.pageSize,
      className: formData.className,
      realName: formData.realName,
      teacherName: formData.teacherName,
      subjectName: formData.subjectName,
      classStatus: formData.classStatus,
      staffId:useStaffStore().staffInfo.staff.id
    }
  }).then(resp => {
    // 处理返回的数据，将其转换为适合表格展示的格式
    const data = resp.data.data;
    const formattedData = data.data.map(item => {
      return item.classVoList.map(classItem => ({
        ...classItem,
        classCount: item.classVoList.length > 0? item.classVoList[0].classCount : 0
      }));
    }).flat();
    loading.value = false;
    tableData = formattedData;
    total.value = resp.data.data.data.length;

    console.log(resp.data.data.data);
  }).catch(error => {});
}

//显示修改界面
function showUpdate(rowData1) {
  rowData = rowData1
  updateDialog.value = true
}

//删除班级
function deleteClass(row) {
  ElMessageBox.confirm("该操作将永久删除数据,请确认是否继续操作?", "Warning", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    axios.delete(`/api/v1/class/delete`, {params: {id: row.id}}).then((resp) => {
      ElMessage({
        message: "删除成功",
        type: 'success',
        duration: 1500,
      })
      loadTableData()
    })
  })
      .catch(() => {
        ElMessage({
          type: "info",
          message: "删除失败",
        })
      })
}

/**
 * 切页
 */
function handleCurrentChange(page) {
  pagination.currentPage = page
  loadTableData()
}

const handleSizeChange = (size) => {
  pagination.pageSize = size
  loadTableData()
}

loadTableData();
</script>

<template>
  <!-- 查询及添加 -->
  <el-form :inline="true" :model="formData" class="demo-form-inline">
    <el-form-item label="班级: " style="width: 195px">
      <el-input placeholder="输入班级名称" autocomplete="off" v-model="formData.className" />
    </el-form-item>
    <el-form-item label="班主任: " style="width: 200px">
      <el-input placeholder="输入班主任名字" autocomplete="off" v-model="formData.teacherName" />
    </el-form-item>
    <el-form-item label="教员:" style="width: 195px">
      <el-input placeholder="输入教员名字" autocomplete="off" v-model="formData.realName" />
    </el-form-item>
    <el-form-item label="学科:" style="width: 195px">
      <el-input placeholder="输入学科名" autocomplete="off" v-model="formData.subjectName" />
    </el-form-item>
    <el-form-item label = "是否结业:" style = "width:195px">
      <el-select v-model = "formData.classStatus" placeholder = "请选择状态">
        <el-option :label = "classStatus === 0? '已结业' : '未结业'" :value = "classStatus" v-for = "classStatus in [0, 1]"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="loadTableData">搜索</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" icon="Plus" @click="addDialog = true">添加班级</el-button>
    </el-form-item>
  </el-form>

  <!-- 列表 -->
  <el-table ref="multipleTableRef" :loading="loading" style="width: 100%" :data="tableData">
    <el-table-column property="className" width="100" label="班级名" align="center"/>
    />
    <el-table-column label="班主任" property="teacherName" width="100" align="center"/>
    <el-table-column property="realName" label="教员" width="100" align="center"/>
    <el-table-column property="classCount" label="班级人数" min-width="100" align="center"/>
    <el-table-column property="subjectName" label="学科名" min-width="150" align="center"/>
    <el-table-column property="startDate" label="开班日期" width="117" align="center"/>
    <el-table-column property="endDate" label="结业日期" min-width="117" align="center"/>
    <el-table-column label="是否结业" min-width="100" align="center">
      <template v-slot="scope">
        <el-tag type="success" v-if="scope.row.classStatus === 1">未结业</el-tag>
        <el-tag type="danger" v-else-if="scope.row.classStatus === 0">已结业</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作" fixed="right" width="200" align="center">
      <template v-slot="scope">
        <el-link type="primary" icon="edit" style="margin-right: 10px" @click="showUpdate(scope.row)">修改</el-link>
        <el-link type="danger" icon="delete" style="margin-right: 10px" @click="deleteClass(scope.row)">删除</el-link>
      </template>
    </el-table-column>
  </el-table>

  <div class="demo-pagination-block" style="margin-top: 20px">
    <el-pagination
        size="small"
        v-model:current-page="page"
        v-model:page-size="size"
        :total="total"
        :page-sizes="[5, 10, 15, 20]"
        :background="true"
        layout="total,sizes, prev, pager, next"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange" />
  </div>

  <!--员工添加-->
  <ClassAdd v-model:addDialog="addDialog" @loadTableData="loadTableData"/>
  <!--修改弹框界面-->
  <ClassUpdate v-if="updateDialog" v-model:updateDialog="updateDialog" @loadTableData="loadTableData" :rowData="rowData"/>
</template>

<style scoped>
  
</style>